<template>
  <div id="china_map">中国地图</div>
</template>
  
  <script>
import * as echarts from 'echarts'
import '@/assets/map/china.js'
// import '@/assets/map/jquery-3.6.1'
export default {
  name: 'ChinaMap',

  mounted() {
    //中国地图
    var chinaMapDom = document.getElementById('china_map')
    var chinaMapChart = echarts.init(chinaMapDom)
    var chinaMapoption
    var dataList = []
    //给methods使用
    this.echartInstance = chinaMapChart

    chinaMapoption = {
      tooltip: {
        triggerOn: 'click',
        formatter: function (e) {
          return '.5' == e.value
            ? e.name + '：有疑似病例'
            : e.seriesName + '<br />' + e.name + ':' + e.value
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      }, // 提供下载工具
      visualMap: {
        min: 0,
        max: 100000,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: ['高', '低'],
        pieces: [
          {
            gt: 10000,
            label: '> 10000人',
            color: '#7f1100'
          },
          {
            gte: 1000,
            lte: 10000,
            label: '1000 - 10000人',
            color: '#ff5428'
          },
          {
            gte: 100,
            lt: 1000,
            label: '100 - 1000人',
            color: '#ff8c71'
          },
          {
            gt: 10,
            lt: 100,
            label: '10 - 100人',
            color: '#ffd768'
          },
          {
            gt: 1,
            lt: 10,
            label: '1 - 10人',
            color: '#ffffff'
          }
        ],
        show: !0
      },
      geo: {
        map: 'china',
        roam: !1,
        scaleLimit: {
          min: 1,
          max: 2
        },
        zoom: 1.23,
        top: 65,
        label: {
          show: !0,
          fontSize: '14',
          color: 'rgba(0,0,0,0.7)'
        },
        itemStyle: {
          //shadowBlur: 50,
          //shadowColor: 'rgba(0, 0, 0, 0.2)',
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: '#f2d5ad',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      },
      series: [
        {
          name: '确诊病例',
          type: 'map',
          aspectScale: 0.2,
          // layoutCenter: ['50%', '30%'],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          // layoutSize: 100,
          geoIndex: 0,
          data: dataList
        }
      ]
    }
    this.$http.get('/covid').then((res) => {
      console.log(typeof res.data)
      for (let i in res.data) {
        dataList[i] = res.data[i]
      }
      chinaMapChart.setOption(chinaMapoption)
    })
    // 窗口大小实现自适应
    window.addEventListener('resize', this.resizeHandle)
  },
  methods: {
    resizeHandle() {
      this.echartInstance.resize()
    }
  },
  unmounted() {
    console.log('清理内存chinamap,防止内存泄漏')
    // 窗口大小实现自适应
    window.removeEventListener('resize', this.resizeHandle)
  }
}
</script>
  
<style lang="less" scoped>
#china_map {
  // margin-top: -70px;
  // height: 700px;
  width: 100%;
  height: 100%;
  // height: 700px;
}
</style>